<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html, body{
            width: 100%;
            height: 100%;
        }

        .wrap{
            position: absolute;
            left: 0;
            top: 0;
            bottom:0;
            right: 0;
            margin: auto;
            width: 500px;
            aspect-ratio: 1 / 1.3;
            border: 3px solid;
            overflow: hidden;
        }
        .img {
            width: 100%;
            height: 100%;
            filter: blur(3px);
        }
        .mirror {
            width: 150px;
            height: 150px;
            border: 3px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            cursor: none;
        }

        .mirror-img {
            width: 1000px;
            position: absolute;
        }

    </style>
</head>
<body>

    <div>
        <input type="range" step="1" max="10" min="0" onchange="setblur(event)">
    </div>

    <div class="wrap">
        <img src="./image/cyy.jpeg" alt="" class="img">
        <div class="mirror">
            <img src="./image/cyy.jpeg" alt="" class="mirror-img">
        </div>
    </div>

    <script>

        function setblur(e) {
            console.log(e.target.value)
            let value = e.target.value;
            img.style.filter = `blur(${value}px)`
        }

       let wrap = document.querySelector('.wrap');
       let mirror = document.querySelector('.mirror');
       let img = document.querySelector('.img');
       let mirrorimg = document.querySelector('.mirror-img');
       wrap.onmousemove = function(e) {
           //console.log(e.clientX, e.clientY);
           //console.dir(this)
           let left = e.clientX - this.offsetLeft;
           let top = e.clientY - this.offsetTop;
           let moveX = left - mirror.offsetWidth / 2;
           let moveY = top - mirror.offsetHeight / 2;
          /*  if(moveX > 0 && moveX < this.offsetWidth - mirror.offsetWidth) {
              mirror.style.left = moveX + 'px';
           } 

           if(moveY > 0 && moveY < this.offsetHeight - mirror.offsetHeight) {
             mirror.style.top = moveY + 'px';
         } */

         mirror.style.left = moveX + 'px';

         mirror.style.top = moveY + 'px';

         let ratioX = img.offsetWidth / left
         let ratioY = img.offsetHeight / top

         //let mirLeft =  mirrorimg.offsetWidth / ratioX - mirror.offsetWidth / 2
         //let mirTop = mirrorimg.offsetHeight / ratioY - mirror.offsetHeight / 2

         let mirLeft =  mirrorimg.offsetWidth  * left / img.offsetWidth - mirror.offsetWidth / 2
         let mirTop = mirrorimg.offsetHeight * top / img.offsetHeight  - mirror.offsetHeight / 2

         mirrorimg.style.left = -mirLeft + 'px'
         mirrorimg.style.top = -mirTop + 'px'
         console.log(ratioX, ratioY)
           //console.log(left, top,moveX)
       }
    </script>
    
</body>
</html>